<template>
  <main class="site-content" :class="{ 'site-content--tabs': this.$route.meta.isTab }">
    <!-- 主入口-标签页-内容页 -->
    <el-tabs v-if="this.$route.meta.isTab" v-model="mainTabsActiveName" :closable="true" @tab-click="selectedTabHandle" @tab-remove="removeTabHandle">
      <el-dropdown class="site-tabs__tools" :show-timeout="0">
        <i class="el-icon-arrow-down el-icon--right"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="closeCurrentTabHandle">关闭当前标签页</el-dropdown-item>
          <el-dropdown-item @click.native="closeOtherTabHandle">关闭其它标签页</el-dropdown-item>
          <el-dropdown-item @click.native="closeAllTabHandle">关闭全部标签页</el-dropdown-item>
          <el-dropdown-item @click.native="refreshCurrentTabHandle">刷新当前标签页</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-tab-pane v-for="item in this.mainTabs" :key="item.name" :label="item.title" :name="item.name">
        <el-card :body-style="siteContentViewHeight">
          <iframe v-if="item.type === 'iframe'" :src="item.iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
          <span v-else>
            <keep-alive v-if="item.keepAlive">
              <router-view v-if="item.name === mainTabsActiveName" :size="size" @closeCurrentTabs="closeCurrentTabHandle" />
            </keep-alive>
            <router-view v-else :size="size" />
          </span>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!-- 主入口-不带标签页-内容页 -->
    <el-card v-else :body-style="siteContentViewHeight">
      <iframe v-if="this.$route.meta.type === 'iframe'"
       :src="this.$route.meta.iframeUrl" width="100%"
       :height="siteContentIframeHeight" frameborder="0"
       scrolling="yes">
      </iframe>
      <div v-else>
        <!-- vue的keep-alive用于缓存页面实例，再次调用不需要请求http -->
        <keep-alive v-if="this.$route.meta.keepAlive" :size="size">
          <router-view />
        </keep-alive>
        <router-view v-else :size="size" />
      </div>
    </el-card>
  </main>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {
    size: {
      get () { return this.$store.getters.controlSize }
    },
    documentClientHeight: {
      get () { return this.$store.getters.documentClientHeight }
    },
    menuActiveName: {
      get () { return this.$store.getters.menuActiveName },
      set (val) { this.$store.commit('common/SET_MENUACTIVENAME', val) }
    },
    mainTabs: {
      get () { return this.$store.getters.mainTabs },
      set (val) { this.$store.commit('common/SET_MAINTABS', val) }
    },
    mainTabsActiveName: {
      get () { return this.$store.getters.mainTabsActiveName },
      set (val) { this.$store.commit('common/SET_MAINTABSACTIVENAME', val) }
    },
    siteContentViewHeight () {
      let height = this.documentClientHeight - 20 - 2
      // card上下padding减少30px
      if (this.$route.meta.isTab) {
        height -= 30
      }
      if (this.$route.meta.type && this.$route.meta.type === 'iframe') {
        return { height: height + 'px' }
      }
      // content padding高度
      this.$store.commit('common/SET_MAINCONTENTHEIGHT', (height - 10 * 2))
      return { minHeight: height + 'px' }
    },
    siteContentIframeHeight () {
      let height = this.documentClientHeight - 20 - 2 - 5
      // pading高度
      height -= 20 * 2
      // card上下padding减少20px
      height -= 20
      if (this.$route.meta.isTab) {
        height -= 40
      }
      return height + 'px'
    }
  },
  methods: {
    // 选中table标签
    selectedTabHandle (target) {
      target = this.mainTabs.filter(item => item.name === target.name)
      if (target.length >= 1) {
        this.$router.push({ name: target[0].name })
      }
    },
    // 删除table标签
    removeTabHandle (targetName) {
      this.mainTabs = this.mainTabs.filter(item => item.name !== targetName)
      if (this.mainTabs.length >= 1) {
        // 当前选中tab被删除
        if (targetName === this.mainTabsActiveName) {
          this.$router.push({ name: this.mainTabs[this.mainTabs.length - 1].name }, () => {
            this.mainTabsActiveName = this.$route.name
          })
        }
      } else {
        this.menuActiveName = ''
        this.$router.push({ name: 'home' })
      }
    },
    // 关闭当前table标签
    closeCurrentTabHandle () {
      this.removeTabHandle(this.mainTabsActiveName)
    },
    // 关闭其他table标签
    closeOtherTabHandle () {
      this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
    },
    // 关闭所有table标签
    closeAllTabHandle () {
      this.mainTabs = []
      this.menuActiveName = ''
      this.$router.push({ name: 'home' })
    },
    // 刷新当前table标签
    refreshCurrentTabHandle () {
      let tableName = this.mainTabsActiveName
      this.removeTabHandle(tableName)
      this.$nextTick(() => {
        this.$router.push({ name: tableName })
      })
    }
  }
}
</script>

<style lang="scss">
.site-content {
  position: relative;
  padding: 10px;

  &__wrapper {
    position: relative;
    // padding-top: 30px;
    margin-left: 230px;
    min-height: 100%;
  }
  &--tabs {
    padding: 40px 0 0;
  }
  > .el-tabs {
    > .el-tabs__header {
      position: fixed;
      top: 50px;
      left: 230px;
      right: 0;
      z-index: 930;
      padding: 0 55px 0 15px;
      margin: 0;
      box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.12);
      background-color: #fff;
      > .el-tabs__nav-wrap {
        margin-bottom: 0;
        &:after {
          display: none;
        }
        .el-tabs__active-bar {
          width: 68px !important;
        }
        .el-tabs__item {
          padding: 0 10px !important;
        }
      }
    }
    > .el-tabs__content {
      padding: 0 10px 10px;
      > .site-tabs__tools {
        position: fixed;
        top: 50px;
        right: 0;
        z-index: 931;
        // height: 40px;
        // padding: 0 12px;
        font-size: 16px;
        // line-height: 40px;
        cursor: pointer;
        .el-icon--right {
          margin-left: 0;
          display: inline-block;
          line-height: 40px;
          width: 40px;
        }
      }
      .el-card {
        &__body {
          padding: 10px 20px;
        }
      }
    }
  }
}
</style>
